<%@ page language="java" isELIgnored="false"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
<!-- Bootstrap core CSS -->
<link href="/admin/public/bootstrap.min.css" title="" rel="stylesheet" />
<link href="/admin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" />
<link href="/admin/public/animate.css" rel="stylesheet" />
<link rel="stylesheet" href="/admin/public/inspinia.css" />
<link rel="stylesheet" href="/admin/css/pop-up.css" />
<link rel="stylesheet" href="/admin/css/plugins/toastr/toastr.min.css" />
<link rel="stylesheet" type="text/css"
	href="${request.getContext }/admin/css/xcConfirm.css" />
<script src="/admin/My97/WdatePicker.js"></script>
<!-- 百度编译器 -->
<script type="text/javascript" charset="utf-8" src="/admin/js/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/admin/js/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="/admin/js/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/admin/js/ueditor.all.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
	<script src="/admin/public/html5shiv.min.js"></script>
	<script src="/admin/public/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.img{
	height: 214px;
	width:640px;
}
</style>
</head>
<body>
	<div id="wrapper" class="container">
		<div class="wrapper wrapper-content">
			<div class="right_box">
				<div style="border: none; box-shadow: none;" class="right_one row">
					<div class="col-md-12 col-sm-12 col-xs-12" style="float: left;">
						<form class="form-horizontal" method="post" id="saveCard" enctype="multipart/form-data"
							novalidate="novalidate">
							<div class="form-group">
								<label class="col-lg-2 control-label">卡片名称:</label>
								<div class="col-lg-6">
									<input type="text" class="form-control" id="cardName"
										name="cardName">
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">卡片类型:</label>
								<div class="col-lg-6">
									<select class="select2_demo_1 form-control" name="cardTypeId"
										id="cardTypeId">
										<option value="">--请选择--</option>
										<option value="1">月卡</option>
										<option value="2">私教卡</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">卡片金额:</label>
								<div class="col-lg-6">
									<input type="text" class="form-control" id="qian"
										name="qian"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">卡片有效期(天):</label>
								<div class="col-lg-6">
									<input type="text" class="form-control" id="timer"
										name="timer"/>
								</div>
							</div>
							<div class="form-group" id="ccs">
								<label class="col-lg-2 control-label">使用次数:</label>
								<div class="col-lg-6">
									<input type="text" class="form-control" id="period"
										name="period"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">背景图片:</label>
								<div class="col-lg-6">
									<input type="file" class="form-control" id="picUrl"
										name="picUrl" onchange="preview(this,1)">
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"></label>
								<div class="col-lg-6">
									<span style="color:red;">建议图片尺寸：640*214</span>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"></label>
								<div class="col-lg-6">
									<div id="preview1">
										<img src="${picUrl }" alt="" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">关联门店:</label>
								<div class="col-lg-6">
									<c:forEach items="${tlist }" var="item">
										<input type="checkbox" style="width: 60px"
											value="${item.shopId }" checked="checked" name="shopId" />
										<span>${item.shopName }</span>
									</c:forEach>
								</div>
							</div>
							 <div class="form-group">
								<label class="col-lg-2 control-label">卡片注意事项:</label>
								<div class="col-lg-6">
									<script id="editor2" type="text/plain" name="zysx"  style="width:504px;height:200px;">${zysx }</script>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">卡片描述:</label>
								<div class="col-lg-6">
									<script id="editor1" type="text/plain" name="jianjie"  style="width:504px;height:200px;">${jianjie }</script>
								</div>
							</div>
							<input type="button" onclick="saveCard();" id="btnn"
								style="width: 82px; height: 34px; display: none; margin-left: 12px"
								value="保存" class="col-lg-3 btn btn-success" />
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/admin/public/jquery-1.11.3.js"></script>
	<script src="/admin/public/bootstrap.min.js" type="text/javascript"></script>
	<script src="${request.getContext }/admin/js/xcConfirm.js"
		type="text/javascript" charset="utf-8"></script>
	<script src="/admin/js/plugins/toastr/toastr.min.js"></script>
	<script src="/admin/js/new_page.js"></script>
	<script src="/admin/js/jquery.form.min.js"></script>
	<script type="text/javascript">
		function preview(file, i) {
			var prevDiv = document.getElementById('preview' + i);
			if (file.files && file.files[0]) {
				var reader = new FileReader();
				reader.onload = function(evt) {
					prevDiv.innerHTML = '<img class="img" src="' + evt.target.result + '" />';
				}
				reader.readAsDataURL(file.files[0]);
			} else {
				prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
			}
		}
	</script>
	<script>
	
	$("#cardTypeId").change(function(){
		if($("#cardTypeId").val()==1){
			$("#ccs").hide();
		}
		if($("#cardTypeId").val()==2){
			$("#ccs").show();
		}
	})
	
	
		function check() {
			var cardName = $("#cardName").val();
			var cardTypeName=$('#cardTypeId option:selected') .val();//选中的值
			var qian = $("#qian").val();
			var timer = $("#timer").val();
			var period = $("#period").val();
			var shoplength = $("input[name='shopId']:checked").length;
			if (cardName.length == 0) {
				alertNew('请输入卡片名称！', false);
				return false;
			}
			if (cardTypeName == "") {
				alertNew('请选择卡片类型！', false);
				return false;
			}
			if (qian.length == 0) {
				alertNew('请输入卡片金额！', false);
				return false;
			}
			if (timer.length == 0) {
				alertNew('请输入卡片有效期！', false);
				return false;
			}
			if (cardTypeName==2&&period.length == 0) {
				alertNew('请输入卡片使用次数！', false);
				return false;
			}
			
			if (shoplength == 0) {
				alertNew('请选择门店！', false);
				return false;
			}
			return true;
		}
		function saveCard() {
			if (check()) {
			    var spCodesTemp = "";
			      $('input:checkbox[name="shopId"]:checked').each(function(i){
			       if(0==i){
			        spCodesTemp = $(this).val();
			       }else{
			        spCodesTemp += (","+$(this).val());
			       }
			      });
			      $('#saveCard').ajaxSubmit({
					type : "post",
					data :{
						"shopIds":spCodesTemp
					},
					dataType : "json",
					enctype:"multipart/form-data",
					url : "/admin/user/saveCard",
					success : function(data) {
						if (data.success) {
							alertNew(data.msg, true);
							$('#ifr', window.parent.document).attr('src',
									'/admin/user/cardlist');
						}
					},
					error : function(data) {
						alertNew("您没有权限添加卡片信息！", true);
					}
				});
			}
		}
	</script>
<script type="text/javascript">
		var ue=UE.getEditor('editor1');
		var ue=UE.getEditor('editor2');
	</script>
</body>
</html>